<template>
  <div>
    <common-header :title="title"></common-header>
    <div class="content">
      <div class="form-item">
        <label class="form-label">姓名</label>
        <input placeholder="员工姓名" class="input input-inline" type="text" name="Ename" v-model="emp.Ename">
      </div>
      <div class="form-item">
        <label class="form-label">年龄</label>
        <input placeholder="年龄" class="input input-inline" type="text" name="Eage" v-model="emp.Eage">
      </div>
      <div class="form-item">
        <label class="form-label">部门</label>
        <select class="input-inline" v-model="emp.Edeptno">
          <option value="-1">请选择</option>
          <option
            v-for="dept in depts"
            :value="dept.Dno"
          >{{dept.Dname}}</option>
        </select>
      </div>
      <div class="form-item">
        <label class="form-label">头像</label>
        <img @click="showUpload()" class="icon input-inline" src="../../assets/img/camera.png"/>
        <input @change="doUpload($event)" id="image" type="file" name="icon" style="display: none">
      </div>
    </div>
    <div>
      <button @click="addEmp()">添加</button>
    </div>
  </div>
</template>

<script>
  import CommonHeader from './components/commonHeader'
  import axios from 'axios'

  export default {
    name: "add",
    components: {
      CommonHeader
    },
    data() {
      return {
        title: '添加员工',
        depts: [],
        emp: {
          Ename: '',
          Eage: '',
          Edeptno: '-1',
          icon: ''
        },
      }
    },
    methods: {
      showUpload() {
        document.getElementById('image').click();
      },
      doUpload(event) {
        // console.log(event.target.value)
        console.log(event.target.files[0].name)

        let file = event.target.files[0]
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file) //读取图片
        fileReader.addEventListener('load', function() {
          // 读取完成
          let res = fileReader.result
          document.getElementsByClassName('icon')[0].src = res
          // res是base64格式的图片
        })

        let formData = new FormData()
        formData.append('file', event.target.files[0], event.target.files[0].name)

        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let that = this
        axios
          .post('/admin/upload/upload_pri.html', formData, config)
          .then(res => {
            console.log(res)
            that.emp.icon = res.data.data.name;
          })
          .catch(err => {
            console.log(err)
          })

      },
      addEmp() {
        axios
          .post('/api/emplist/add.html', this.emp)
          .then(res => {
            console.log(res)
            this.$router.push('/emp')
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    mounted() {
      axios.get('/api/emplist/depts.html')
        .then((res) => {
          console.log(res);
          this.depts = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"

  .content
    padding .3rem
    font-size .36rem
    text-align left
    .form-label
      width 1rem
    .form-item
      padding .2rem 0
      border-bottom 1px solid lightgrey
      .input-inline
        margin-left .4rem
      .icon
        width 80px
        height 80px
        border-radius 10%
        cursor pointer
  button
    margin-top .4rem
    background: $btnSuccess;
    color: white;
    padding: 6px 10px;
    border-radius: 10%;
</style>
